<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人才猎聘</title>
    <link rel="stylesheet" href="./css/hunting.css" >
</head>
<body>
        <div class="all">

            <header style="width:100%;height: 109px;overflow:hidden; " >
                <iframe src="commom_hr/header.html" width="100%" height="100%" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"  ></iframe>
            </header>
            <div class="h_banner">
                <div id="banner_tabs" class="flexslider">
                    <ul class="slides">

                        <li>
                            <a target="_blank" href="javascript:;">
                                <img alt="" src="images/banner.png">
                            </a>
                        </li>
                        <li>
                            <a target="_blank" href="javascript:;">
                                <img alt="" src="images/banner.png">
                            </a>
                        </li>
                        <li>
                            <a target="_blank" href="javascript:;">
                                <img alt="" src="images/banner.png">
                            </a>
                        </li>

                    </ul>
                    <div class="zone">
                        <div class="zone1">
                            <ul class="flex-direction-nav">
                                <li><a class="flex-prev" href="javascript:;">Previous</a></li>
                                <li><a class="flex-next" href="javascript:;">Next</a></li>
                            </ul>
                            <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">

                                <li class="active bubai"><a href="javascript:;"></a></li>

                                <li><a href="javascript:;"></a></li>
                                <li><a href="javascript:;"></a></li>

                            </ol>
                            <div class="server_guide">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="h_third">
              <ul class="clearfix">
                  <li><a href="javascript:;"><img src="images/ltb4.png" ><span>建筑猎聘<br>您最好用的建筑行业人才招聘网</span></a> </li>
                  <li><a href="javascript:;"><img src="images/ltb3.png" ><span>建筑猎聘<br>您最好用的建筑行业人才招聘网</span></a> </li>
                  <li><a href="javascript:;"><img src="images/ltb2.png" ><span>建筑猎聘<br>您最好用的建筑行业人才招聘网</span></a> </li>
                  <li><a href="javascript:;"><img src="images/ltb1.png" ><span>建筑猎聘<br>您最好用的建筑行业人才招聘网</span></a> </li>

              </ul>
            </div>

            <div class="talents">
                <h2>兼职人才简历库  <a href="javascript:;" >更多>></a></h2>
                <div class="dh clearfix">
                    <ul class="sdh">
                        <li class="active"><a href="javascript:;">全部</a> </li>
                        <li><a href="javascript:;">一级建造师</a> </li>
                        <li><a href="javascript:;">二级建造师</a> </li>
                        <li><a href="javascript:;">注册架构师</a> </li>
                        <li><a href="javascript:;">注册建筑师</a> </li>
                        <li><a href="javascript:;">注册监理师</a> </li>
                        <li><a href="javascript:;">注册公用设备工程师</a> </li>
                        <li><a href="javascript:;">注册电气工程师</a> </li>
                        <li><a href="javascript:;">注册造价师</a> </li>
                        <li><a href="javascript:;">注册土木工程师</a> </li>
                    </ul>
                    <ul class="tdh">

                        <li><a href="javascript:;">一级建造师</a> </li>
                        <li><a href="javascript:;">二级建造师</a> </li>
                        <li><a href="javascript:;">注册架构师</a> </li>
                        <li><a href="javascript:;">注册建筑师</a> </li>
                        <li><a href="javascript:;">注册监理师</a> </li>
                        <li><a href="javascript:;">注册公用设备工程师</a> </li>

                    </ul>
                    <div class="r_dh">
                        <a href="javascript:;"><img src="images/l_left.png"> </a>
                        <a href="javascript:;"><img src="images/right.png"> </a>
                    </div>
                </div>
                <ul class="rc clearfix">
                    <li>
                        <a href="hr_detial.html">
                        <img src="images/wanying.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                    <li>
                        <a href="hr_detial.html">
                            <img src="images/yulang.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                    <li>
                        <a href="hr_detial.html">
                            <img src="images/wanying.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                    <li>
                        <a href="hr_detial.html">
                            <img src="images/yulang.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                    <li>
                        <a href="hr_detial.html">
                            <img src="images/wanying.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                    <li>
                        <a href="hr_detial.html">
                            <img src="images/yulang.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="small_banner">
                <div class="case">
                    <div id="slider" class="case_box">
                        <ul>
                            <li class="case_1">
                                <a href="javascript:;">
                                <img src="images/banner2.png">
                                </a>
                            </li>
                            <li class="case_2">
                                <a href="javascript:;">
                                    <img src="images/banner2.png">
                                </a>
                            </li>
                            <li class="case_3">
                                <a href="javascript:;">
                                    <img src="images/banner2.png">
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>

            </div>

            <div class="talents">
                <h2>全职人才简历库  <a href="javascript:;" >更多>></a></h2>
                <div class="dh clearfix">
                    <ul class="sdh">
                        <li class="active"><a href="javascript:;">全部</a> </li>
                        <li><a href="javascript:;">一级建造师</a> </li>
                        <li><a href="javascript:;">二级建造师</a> </li>
                        <li><a href="javascript:;">注册架构师</a> </li>
                        <li><a href="javascript:;">注册建筑师</a> </li>
                        <li><a href="javascript:;">注册监理师</a> </li>
                        <li><a href="javascript:;">注册公用设备工程师</a> </li>
                        <li><a href="javascript:;">注册电气工程师</a> </li>
                        <li><a href="javascript:;">注册造价师</a> </li>
                        <li><a href="javascript:;">注册土木工程师</a> </li>
                    </ul>
                    <ul class="tdh">

                        <li><a href="javascript:;">一级建造师</a> </li>
                        <li><a href="javascript:;">二级建造师</a> </li>
                        <li><a href="javascript:;">注册架构师</a> </li>
                        <li><a href="javascript:;">注册建筑师</a> </li>
                        <li><a href="javascript:;">注册监理师</a> </li>
                        <li><a href="javascript:;">注册公用设备工程师</a> </li>

                    </ul>
                    <div class="r_dh">
                        <a href="javascript:;"><img src="images/l_left.png"> </a>
                        <a href="javascript:;"><img src="images/right.png"> </a>
                    </div>
                </div>
                <ul class="rc clearfix">
                    <li>
                        <a href="hr_de.html">
                            <img src="images/wanying.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                    <li>
                        <a href="hr_de.html">
                            <img src="images/yulang.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                    <li>
                        <a href="hr_de.html">
                            <img src="images/wanying.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                    <li>
                        <a href="hr_de.html">
                            <img src="images/yulang.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                    <li>
                        <a href="hr_de.html">
                            <img src="images/wanying.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                    <li>
                        <a href="hr_de.html">
                            <img src="images/yulang.png">
                            <h4>周小姐</h4>
                            <h3>学历 | 注册情况</h3>
                            <p>证书所在地</p>
                        </a>
                    </li>
                </ul>
            </div>
            <footer style="width:100%;height: 354px;overflow:hidden; " >
                <iframe src="commom_hr/foot.html" width="100%" height="100%" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"  ></iframe>
            </footer>
        </div>


        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="./js/slider.js"></script>
        <script src="./js/jqthumb.js"></script>
        <script>
            $(function () {
                //$("#logo_second").show();
                var bannerSlider = new Slider($('#banner_tabs'), {
                    time: 3000,
                    delay: 400,
                    event: 'click',
                    auto: true,
                    mode: 'fade',
                    controller: $('#bannerCtrl'),
                    activeControllerCls: 'active'
                });
                $('#banner_tabs .flex-prev').click(function () {
                    bannerSlider.prev();
                    bannerSlider.stop()
                });
                $('#banner_tabs .flex-next').click(function () {
                    bannerSlider.next()
                    bannerSlider.stop();
                });
                $("#banner_tabs").hover(function () {//当鼠标移动到图片时候，停止轮播，移开图片时候，继续轮播
                    bannerSlider.stop()
                }, function () {
                    bannerSlider.next()
                })


                mysize();
                $(window).resize(function () {
                    mysize();
                })
                function mysize() {

                    var $num = $(window).width();
                    console.log($num);
                    $('.flexslider .slides a img').jqthumb({
                        width: $num,
                        height: 405
                    });
                }




            })

            var Effect = (function() {

                var Slider = function(o) {
                    this.setting      = typeof o === 'object' ? o : {};
                    this.target       = this.setting.target || 'slider';
                    this.showMarkers  = this.setting.showMarkers || false;
                    this.showControls = this.setting.showControls || false;
                    this.timer        = null;
                    this.currentTime  = null;
                    this.ms           = 35;
                    this.autoMs       = 3000;
                    this.iTarget      = 0;
                    this.nextTarget   = 0;
                    this.speed        = 0;

                    this.init();
                    this.handleEvent();
                };

                Slider.prototype = {
                    init: function() {
                        this.obj      = document.getElementById(this.target);
                        this.oUl      = this.obj.getElementsByTagName('ul')[0];
                        this.aUlLis   = this.oUl.getElementsByTagName('li');
                        this.width    = this.aUlLis[0].offsetWidth;
                        this.number   = this.aUlLis.length;

                        this.oUl.style.width = this.width * this.number + 'px';

                        if(this.showMarkers) {
                            var oDiv = document.createElement('div');
                            var aLis = [];
                            for(var i = 0; i < this.number; i++) {
                                aLis.push('<li>'+ (i+1) +'<\/li>');
                            };
                            oDiv.innerHTML = '<ol>'+ aLis.join('') +'<\/ol>';
                            this.obj.appendChild(oDiv.firstChild);
                            this.aLis = this.obj.getElementsByTagName('ol')[0].getElementsByTagName('li');
                            this.aLis[0].className = 'active';
                            oDiv = null;
                        };

                        if(this.showControls) {
                            this.oPrev = document.createElement('p');
                            this.oNext = document.createElement('p');
                            this.oPrev.className = 'prev';
                            this.oPrev.innerHTML = '&laquo;';
                            this.oNext.className = 'next';
                            this.oNext.innerHTML = '&raquo;';
                            this.obj.appendChild(this.oPrev);
                            this.obj.appendChild(this.oNext);

                        };

                    },

                    handleEvent: function() {
                        var that = this;

                        this.currentTime = setInterval(function() {
                            that.autoPlay();
                        }, this.autoMs);

                        this.addEvent(this.obj, 'mouseover', function() {
                            clearInterval(that.currentTime);
                        });

                        this.addEvent(this.obj, 'mouseout', function() {
                            that.currentTime = setInterval(function() {
                                that.autoPlay();
                            }, that.autoMs);
                        });

                        if(this.showMarkers) {
                            for(var i = 0; i < this.number; i++) {
                                var el = this.aLis[i];
                                (function(index) {
                                    that.addEvent(el, 'mouseover', function() {
                                        that.goTime(index);
                                    });
                                })(i);
                            };
                        };

                        if(this.showControls) {
                            this.addEvent(this.oPrev, 'click', function() {
                                that.fnPrev();
                            });
                            this.addEvent(this.oNext, 'click', function() {
                                that.autoPlay();
                            });
                        };

                    },

                    addEvent: function(el, type, fn) {
                        if(window.addEventListener) {
                            el.addEventListener(type, fn, false);
                        }
                        else if(window.attachEvent) {
                            el.attachEvent('on' + type, fn);
                        };
                    },

                    fnPrev: function() {
                        this.nextTarget--;
                        if(this.nextTarget < 0) {
                            this.nextTarget = this.number - 1;
                        };
                        this.goTime(this.nextTarget);
                    },

                    autoPlay: function() {
                        this.nextTarget++;
                        if(this.nextTarget >= this.number) {
                            this.nextTarget = 0;
                        };
                        this.goTime(this.nextTarget);
                    },

                    goTime: function(index) {
                        var that = this;

                        if(this.showMarkers) {
                            for(var i = 0; i < this.number; i++) {
                                i == index ? this.aLis[i].className = 'active' : this.aLis[i].className = '';
                            };
                        };

                        this.iTarget = -index * this.width;
                        if(this.timer) {
                            clearInterval(this.timer);
                        };
                        this.timer = setInterval(function() {
                            that.doMove(that.iTarget);
                        }, this.ms);
                    },

                    doMove: function(target) {
                        this.oUl.style.left = this.speed + 'px';
                        this.speed += (target - this.oUl.offsetLeft) / 3;
                        if(Math.abs(target - this.oUl.offsetLeft) === 0) {
                            this.oUl.style.left = target + 'px';
                            clearInterval(this.timer);
                            this.timer = null;
                        };
                    }

                };

                return {

                    slider: function(o) {
                        var tt = new Slider(o);
                    }
                };
            })();

            // 调用语句
            Effect.slider({
                'targetElement': 'slider',
                'showMarkers': true,
                'showControls': true
            });
        </script>
</body>
</html>